<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>现金记录</title>
    <link rel="stylesheet" type="text/css" href="static/admin/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="static/admin/css/admin.css" />
</head>
<body>
<div class="wrap-container welcome-container">
    <div class="wrap-container clearfix">
        <div class="column-content-detail">
            <div class="layui-form-item">
                <div class="layui-inline" style="margin-bottom: 0">
                    <input type="text" name="searchphone" required lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="keywords layui-input">
                </div>
                <button class="layui-btn layui-btn-normal search">搜索</button>
            </div>
            <div class="layui-form" id="table-list">
                <table class="layui-table" lay-even lay-skin="nob">
                    <thead>
                    <tr>
                        <th>用户手机号</th>
                        <th>金额（元）</th>
                        <th>来源</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <div class="page-wrap">
                    <div id="page" class="page-wrap">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="static/admin/js/baseUrl.js"></script>
<script type="text/javascript">
    layui.use(['layer', 'jquery', 'laypage', 'form'], function() {
        var layer = layui.layer;
        var $ = layui.jquery;
        var laypage = layui.laypage;
        var form = layui.laypage;
        form.render();

        // 请求参数
        var requestData = {
            pageSize: 10,
            pageNumber: 1,
            phone: '',
        };

        // 获取数据
        function getList(params) {

            $.ajax({
                url: baseUrl + '/price/getPriceListByPage',
                data: JSON.stringify(params),
                type: 'post',
                dataType: 'json',
                contentType: 'application/json',
                withCredentials: true,
                xhrFields: {
                    withCredentials: true
                },
                success: function(data) {
                    if (data.ret == 200) {
                        var list = data.data.list;
                        if(list.length > 0) {
                            var html = '';
                            for (var item of list) {
                                html += '<tr>' +
                                    '<td class="item-name">' + item.userName + '</td>' +
                                    '<td class="item-price">' + item.price + '</td>' +
                                    '<td class="item-sourcename">' + item.sourceName + '</td>' +
                                    '</tr>'
                            }
                            $('.layui-table tbody').html(html);
                            //执行一个laypage实例
                            laypage.render({
                                elem: 'page',
                                count: data.data.total,
                                curr: requestData.pageNumber,
                                jump: function(obj, first) {
                                    if (!first) {
                                        requestData.pageNumber = obj.curr;
                                        getList(requestData)
                                    }
                                }
                            });
                        }else {
                            layer.msg('暂无数据')
                        }
                    }else {
                        if (data.ret == 208) {
                            parent.layer.alert(data.msg, {icon: 0}, function () {
                                parent.location.href = 'login.html'
                            })
                        } else {
                            layer.msg(data.msg, {icon: 0, time: 1000});
                        }
                    }
                },
                error: function() {
                    layer.msg('网络发生故障，请稍后再试', {icon: 0, time: 1000});
                }
            })
        }
        // 初始数据请求
        getList(requestData);
        // 搜索
        $('.search').click(function() {
            requestData.pageNumber = 1;
            requestData.pageSize = 10;
            requestData.phone = $('input[name=searchphone]').val();
            getList(requestData);
        });
    })
</script>
</body>

</html>
